import React from 'react';
import {
  View,
  StyleSheet,
  Animated,
  Easing,
  ViewProps,
  ViewStyle,
} from 'react-native';

// 定义骨架屏组件的 props 类型
interface SkeletonScreenProps extends ViewProps {
  // 骨架屏的数量
  count: number;
  // 骨架屏item的高度
  height?: number;
  // 骨架屏之间的间距
  marginBottom?: number;
  // 自定义样式
  style?: ViewStyle;
}

const LHLSkeletonScreen: React.FC<SkeletonScreenProps> = ({
  count = 20,
  marginBottom = 10,
  height = 50,
  style,
}) => {
  const fadeAnim = React.useRef(new Animated.Value(0.2)).current;

  React.useEffect(() => {
    const animation = Animated.loop(
      Animated.timing(fadeAnim, {
        toValue: 0.8,
        duration: 1200,
        easing: Easing.linear,
        useNativeDriver: true,
      }),
    );

    animation.start();

    return () => {
      animation.stop();
    };
  }, [fadeAnim]);

  const skeletonItems = Array.from({length: count}).map((_, index) => (
    <Animated.View
      key={index}
      style={[
        styles.skeletonItem,
        {
          marginBottom: index === count - 1 ? 0 : marginBottom,
          opacity: fadeAnim,
          width: styles.container.width,
          height,
        },
      ]}
    />
  ));

  return <View style={[styles.container, style]}>{skeletonItems}</View>;
};

const styles = StyleSheet.create({
  container: {
    padding: 16,
    flex: 1,
    width: '100%',
    display: 'flex',
    overflow: 'hidden',
  },
  skeletonItem: {
    backgroundColor: '#e0e0e0',
    borderRadius: 4,
  },
});

export default LHLSkeletonScreen;
